<template>
<div class="login">
	<!--背景图片-->
	<img :src="background" style="width: 99%;height: 99%;" alt/>
	<!--表单-->
	<el-form v-model="loginInfo" class="loginForm"  size="medium">
		<h2 style="text-align: center;margin-bottom: 50px;font-size: 30px;">账号登录</h2>
		<div class="loginForm-mode"><div @click="loginMode=1" :style="{'border-bottom':loginMode===1?'3px solid blue':'none'}">账号登录</div><div :style="{'border-bottom':loginMode===2?'3px solid blue':'none'}" @click="loginMode=2" id="longinMode-1">手机短信登录</div></div>
		<!--账号登录页面-->
		<div v-if="loginMode==1">
		<el-form-item >
			<input  v-model="loginInfo.account" 
				class="input-text" 
				autofocus 
				placeholder="请输入账号/手机号" 
				maxlength="11"
				autocomplete="off"></input>
		</el-form-item>
		<el-form-item >
			<input type="password" show-password="true" maxlength="16" v-model="loginInfo.password" class="input-text" placeholder="请输入密码" autocomplete="off"></input>
		</el-form-item>
		<span @click="handlerFindPassword" style="float: right;margin:0 30px;font-size:15px;cursor: pointer;font-size: 13px;">忘记密码?</span>
		<el-form-item style="margin-top: 50px;text-align: center;">
			<el-button type="primary" @click="handlerLogin" class="button-login">登录</el-button>
		</el-form-item>
		<div style="float: right;margin: 0 30px;font-size: 16px;">还没有账号？<span @click="handlerToRegister" style="color:#1368F7;cursor: pointer;">去注册</span></div>
		</div>
		<!--手机验证码登录页面-->
		<div v-if="loginMode==2">
			<el-form-item >
				<input  v-model="loginInfo.phone" class="input-text" maxlength="11" autofocus placeholder="请输入手机号" autocomplete="off"></input>
			</el-form-item>
			<el-form-item >
				<input type="text" maxlength="6" v-model="loginInfo.verifyCode" class="input-text" style="width: 200px;" placeholder="请输入验证码" autocomplete="off">
					
				</input><el-button @click="handlerGetLoginVerifyCode" class="button-authcode">获取验证码</el-button>
			</el-form-item>
			<el-form-item style="margin-top: 50px;text-align: center;">
				<el-button type="primary" @click="handlerLoginByVerifyCode()" class="button-login">登录</el-button>
			</el-form-item>
				<div style="float: right;margin: 0 30px;font-size: 16px;">还没有账号？<span @click="handlerToRegister" style="color:#1368F7;cursor: pointer;">去注册</span></div>
		</div>
	</el-form>
</div>
</template>

<script>
	import 'animate.css'
	export default{
		name:'Login',
		data(){
			return {
				formLabelWidth:'60px',
				loginInfo:{
					account:'',
					username:'',
					password:'',
					phone:'',
					verifyCode:'',
				},
				loginMode:'1',
				background:require("@/assets/login-background.png"),
			}
		},
		methods:{
			handlerLogin(){
			if(this.loginInfo.account.length==11){
					this.loginInfo.phone=this.loginInfo.account
				}else{
					this.loginInfo.username=this.loginInfo.account
				}
				if(this.loginInfo.account.length<1){
					this.$message.error("用户名或密码不能为空")
					return;
				}
				this.$axios({
					method:'POST',
					url:'user/login',
					data:this.loginInfo,
				}).then(
					response=>{
						if(response.data.success){
							this.setToken(response.data.data)
							this.$router.replace({
								path:'home/'
							})
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerLoginByVerifyCode(){
				if(this.loginInfo.phone.length!=11){
					this.$message.error("手机格式错误")
					return;
				}
				if(this.loginInfo.verifyCode.length!=6){
					this.$message.error('请输入验证码 6位')
					return;
				}
				this.$axios({
					method:'POST',
					url:'user/loginByVerifyCode',
					data:this.loginInfo,
				}).then(
					response=>{
						if(response.data.success){
							this.setToken(response.data.data)
							this.$router.replace({
								path:'home/',
							})
						}else{
							this.$message.error(response.data.message)
						}
						},
					error=>{
						console.log(error.message)
						}
					
				)
			},
			handlerGetLoginVerifyCode(){
				if(this.loginInfo.phone.length!=11){
					this.$message.error("手机格式错误")
					return;
				}
				this.$axios({
					method:'POST',
					url:'user/getLoginVerifyCode',
					params:{
						phone:this.loginInfo.phone
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success("验证码获取成功,请注意查收")
						}else{
							//this.$message.error(response.data.message)
						}
					}
				)
			},
			setToken(token){
				localStorage.setItem("token",token);
			},
			removeToken(){
				localStorage.removeItem("token");
			},
			autoLogin(){
				//是否有token,有则跳转Home页面
				if(localStorage.getItem("token")){
					this.$axios({
					method:'POST',
					url:'user/me',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.info('自动登录')
							this.$router.replace({
								path:'home/'
							})
						}else{
							localStorage.removeItem("token")
						}
					},
					error=>{
						console.log(error.message)
					}
				)
				}
			},
			handlerFindPassword(){
				
			},
			handlerToRegister(){
				this.$router.push({
					name:'register'
				})
			},
			handlerSendAuthCode(){
				var phone=this.loginInfoByPhone.phone
				if(phone.length!=11){
					this.$message.error('手机号码格式错误')
				}
			},
			
			
		},
		mounted(){
			//this.autoLogin()
		}
		
	}
</script>

<style scoped>
	.login{
	}
	.loginForm{
		margin: 50px auto;
		width: 550px;
		height: 550px;
		border: 1px solid gainsboro;
		padding: 40px 30px;
		position: absolute;
		right: 15%;
		top: 10%;
		background: white;
	}
	.input-text{
		width: 440px;
		height: 64px;
		line-height: 64px;
		font-size: 20px;
		padding: 0 20px;
		margin: 30px 30px 0 30px;
		
	}
	.button-login{
		width: 350px;
		height: 60px;
		font-size: 26px;
		margin: 15px 0;
	}
	.button-authcode{
		width: 200px;
		height: 64px;
		font-size: 26px;
	}
	.loginForm-mode{
		margin: 20px 0 20px 25%;
		color:#7478A6;
	}
	.loginForm-mode>div{
		display: inline-block;
		margin-right: 50px;
		font-size: 22px;
		font-weight: bold;
		cursor: pointer;
	}
</style>